<template>
  <view class="container">
	  <view class="search-wrapper">
	  	<uni-search-bar placeholder="搜索实习岗位"
	  	               @confirm="search"
	  	               @cancel="cancel" 
	  	               @clear="cancel"
	  	               class="sticky-search"/>
	  	
	  	<!-- 加载提示 -->
	  </view>
  
    <view v-if="loading" class="loading-text">
      <uni-load-more status="loading" :content-text="{ contentdown: '' }"/>
    </view>

    <!-- 空数据提示 -->
    <view v-if="!loading && jobList.length === 0" class="empty-container">
      <image src="/static/empty.png" class="empty-image"/>
      <text class="empty-text">暂时没有找到合适岗位哦</text>
    </view>

    <scroll-view 
      class="scroll-view" 
      scroll-y="true"  
      @scrolltolower="onReachBottom"
      :show-scrollbar="true"
    >
      <view class="job-list">
        <view 
          v-for="job in jobList"
          :key="job.positionId"
          class="job-card"
          @click="viewDetail(job.positionId, job.companyId)"
        >
          <view class="card-header">
            <text class="job-title">{{ job.title }}</text>
            <text class="salary-tag">{{ formatSalary(job.salary) }}</text>
          </view>
          <view class="company-info">
            <uni-icons type="contact" size="16" color="#666"/>
            <text class="company-name">{{ job.companyName }}</text>
          </view>
          <view class="location-info">
            <uni-icons type="location" size="16" color="#666"/>
            <text class="location-text">{{ job.location }}</text>
          </view>
          <view class="card-footer">
            <text class="intern-type">{{ job.type }}</text>
            <uni-icons type="arrowright" color="#999"/>
          </view>
        </view>
      </view>

      <view v-if="noMoreData" class="end-marker">
        <text class="end-line">—— 已经到底啦 ——</text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
// #ifdef MP-WEIXIN
export default {
  onShareAppMessage() {
    return {
      title: "高潜人才",
      path: `/pages/home/home`
    }
  },
  onShareTimeline() {
      return {
        title: '专业人才测评，发现你的潜力！',
        query: 'from=timeline',          // 可选参数
        imageUrl: '/static/wx.png' // 朋友圈专用图片
      }
    }
}
// #endif
</script>
<script setup>
import { ref } from 'vue';
import { http } from '../../utils/requestUtil';

// 数据相关
const jobList = ref([]);
const pageNum = ref(1);
const noMoreData = ref(false);
const loading = ref(false);
const searchValue = ref();
// 格式化薪资显示
const formatSalary = (salary) => {
  return salary?.replace(/田/g, '天') || '薪资面议';
};
const viewDetail = (id,cId) => {
  uni.navigateTo({ url: `/pages/internship/internshipDetail/internshipDetail?id=${id}&cId=${cId}` });
};
// 加载数据（添加基础防抖）
const loadData = async () => {
	
  if (noMoreData.value || loading.value) return;
  
  try {
    loading.value = true;
    
    const response = await http.get(`/internship/position/positionList?pageSize=4&pageNum=${pageNum.value}`
	,{
		search:searchValue.value == null ? '':searchValue.value
	});
    console.log(response)
    if (response.code === 200) {
      // 追加数据
      jobList.value = [...jobList.value, ...response.rows];
      
      // 判断是否还有更多数据（假设接口返回总条数）
      if (response.rows.length < 3 || jobList.value.length >= response.total) {
        noMoreData.value = true;
      }
    }
  } catch (error) {
    console.error('请求失败:', error);
    uni.showToast({ title: '数据加载失败', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

// 触底加载
const onReachBottom = () => {
// console.log(1)
  if (!noMoreData.value) {
    pageNum.value =pageNum.value+1;
    loadData();
  }
};
const cancel = ()=>{
	jobList.value=[]
	noMoreData.value=false
	searchValue.value=''
	loadData()
}
// 搜索功能（重置分页）
const search = (e) => {
	console.log(e)
	searchValue.value=e.value
  pageNum.value = 1;
  jobList.value = [];
  noMoreData.value = false;
  loadData();
};

// 初始化加载
loadData();
</script>


<style scoped>
	.scroll-view{
		height: 100vh;
	}
	/* 在uni-search-bar外层添加 */
	.search-wrapper {
	  position: sticky;
	  top: 0;
	  z-index: 999;
	  background: #fff;
	  /* padding: 12px 16px; */
	}
.container {
  background: #f5f6f8;
  min-height: 100vh;
}

.sticky-search {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  /* padding: 12px; */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.job-list {
  padding: 0 12px;
}

.job-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.job-card:active {
  transform: scale(0.98);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.job-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  max-width: 70%;
}

.salary-tag {
  background: #e8f4ff;
  color: #1890ff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.company-info, .location-info {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.company-name {
  color: #666;
  font-size: 14px;
  margin-left: 6px;
}

.location-text {
  color: #888;
  font-size: 13px;
  margin-left: 6px;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.intern-type {
  color: #666;
  font-size: 12px;
}

.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0;
}

.empty-image {
  width: 200px;
  height: 200px;
  opacity: 0.8;
}

.empty-text {
  color: #999;
  margin-top: 16px;
}

.end-marker {
  padding: 20px 0;
  text-align: center;
}

.end-line {
  color: #ccc;
  font-size: 12px;
  letter-spacing: 1px;
}

.loading-text {
  padding: 20px 0;
}
</style>